<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商城管理系统登录</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<style>
body {
	background-color: #009688;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
}

.login-container {
	background-color: #ffffff;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	text-align: center;
	width: 350px;
}

.login-container h1 {
	color: #009688;
	margin-bottom: 30px;
}

.layui-form-item {
	display: flex;
	align-items: center;
	justify-content: center;
}

.layui-form-item .layui-input-inline {
	flex-grow: 1;
}

.layui-btn {
	width: 100px;
}
</style>
</head>
<body>
	<div class="login-container">
		<h1>商城管理系统登录</h1>
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<label class="layui-form-label">用户名：</label>
				<div class="layui-input-inline">
					<input type="text" name="username" required lay-verify="required"
						placeholder="请输入用户名" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码：</label>
				<div class="layui-input-inline">
					<input type="password" name="password" required
						lay-verify="required" placeholder="请输入密码" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="submitForm">登录</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	
</body>

<script type="text/javascript" src="./layui/layui.js"></script>
<script type="text/javascript" src="./layui/jquery-1.8.3.min.js"></script>
	
	<script>
		$(function() {
			layui.use([ 'form', 'layer' ], function() {
				var layer = layui.layer;
				var form = layui.form;
				//监听提交
				form.on('submit(submitForm)', function(data) {
					// data.field
					console.log(data.field)
					$.ajax({
						type : "POST",
						contentType : "application/json; charset=UTF-8",
						url : "/shop/adminServlet/login", // 替换为你的Servlet的URL
						data : data.field,
						dataType : 'json', // 返回值类型， json、text等
						success : function(res) {
							if (res.success) {
								// 处理响应
								layer.msg("登录成功");
								// 存储用户名到 sessionStorage
								sessionStorage.setItem('loginNickname',
										res.data.nickname);
								window.location.href = 'index.html';

							} else {
								// 处理响应
								layer.msg(res.message);
							}

						},
						error : function() {
							layer.msg("提交失败");
						}
					});
					return false;
				});
			});
		});
	</script>
</html>
